<template>
    <div class="application-container">
        <header>
            <div class="left">
                <i v-if="showHome" @click="$router.push('/home')"></i>
                <i class="back" v-if="showBack" @click="$router.go(-1)"></i>
            </div>
            <div class="center">
                {{title}}
            </div>
            <div class="right">
                <!-- <i class="new" @click="btnEvt" v-if="showNew"></i> -->
                <i class="new" @click="$emit('newEvent')" v-if="showNew"></i>
            </div>
        </header>
        <main>
            <slot/>
        </main>
    </div>
</template>

<script>
    export default {
        props: {
            title: {
                type: String,
                required: true
            },
            showHome: {
                type: Boolean,
                default: true
            },
            showBack: {
                type: Boolean,
                default: false
            },
            showNew: {
                type: Boolean,
                default: false
            }
        },

        methods: {
            btnEvt() {
                this.$emit('newEvent')
            }
        }
    }
</script>